let findEle = (parent, type) => {
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}

const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

// 文本合成系统如 input method editor（即输入法编辑器）
// 监听输入合成开始（例如中文输入法）
function onCompositionStart (e) {
  e.target.composing = true
}

// 监听输入合成结束
function onCompositionEnd (e) {
  if (!e.target.composing) return
  e.target.composing = false
  // e.target.value = e.target.value.replace(/[";"'`|()[\]{}$&#!<>\\"\r\n]/g, '')
  e.target.value = e.target.value.replace(/[\r\n]/g, '')
  trigger(e.target, e.target.nodeName.toLowerCase())
}

const emoji = {
  bind: function (el, binding, vnode) {
    // 正则规则可根据需求自定义
    // var regRule = /[";"'`|()[\]{}$&#!<>\\"\r\n]/g
    var regRule = /[\r\n]/g
    // 区别输入框和文本框
    let $inp = findEle(el, 'input') || findEle(el, 'textarea')
    // 监听中文输入框
    $inp.addEventListener('compositionstart', onCompositionStart)
    $inp.addEventListener('compositionend', onCompositionEnd)
    el.$inp = $inp

    // 输入过程中执行，替换不能数入的字符位‘’
    $inp.handle = function () {
      if (event.target.composing) return
      $inp.value = $inp.value.replace(regRule, '')
      trigger($inp, $inp.tagName.toLowerCase())
    }
    $inp.addEventListener('keyup', $inp.handle)
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle)
  }
}

export default emoji
